<template>
    <div>
        <h1>所属城市</h1>
        所在地:
        <select>
            <option value="0">请选择</option>
            <option value="item.id" v-for="item in city" :key="item.id">{{item.name}}</option>
            
        </select>
        <table class="table table-bordered">
            <tr class="bg bg-pgrimary">
                <td>Id</td>
                <td>城市</td>
            </tr>
            <tr v-for="item in city" :key="item.id">
                <td>{{item.id}}</td>
                <td>{{ item.name }}</td>
          
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import "bootstrap/dist/css/bootstrap.min.css"
let  city = ref([
    {id:1,name:'北京'},
    {id:2,name:'上海'},
    {id:3,name:'广州'},
    {id:4,name:'深圳'},
    {id:5,name:'杭州'},
    {id:6,name:'南京'},
])
</script>

<style scoped>

</style>